<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片切换</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
    <div class="border"></div>
    <input id="n1" name="p" type="radio" checked>
    <input id="n2" name="p" type="radio" >
    <input id="n3" name="p" type="radio" >
    <input id="n4" name="p" type="radio" >
    <input id="n5" name="p" type="radio" >
    <input id="n6" name="p" type="radio" >

    <label for="n1"></label>
    <label for="n2"></label>
    <label for="n3"></label>
    <label for="n4"></label>
    <label for="n5"></label>
    <label for="n6"></label>
    
        <ul>
            <li>
                <div class="img"></div>
                <div>一只黄鹂鸣翠柳</div>
            </li>
            <li>
                <div class="img"></div>
                <div>日斜草远牛行迟</div>
            </li>
            <li>
                <div class="img"></div>
                <div>闻鸡起舞</div>
            </li>
            <li>
                <div class="img"></div>
                <div>阿猫阿狗一家人</div>
            </li>
            <li>
                <div class="img"></div>
                <div>人怕出名猪怕壮</div>
            </li>
            <li>
                <div class="img"></div>
                <div>狡兔三窟</div>
            </li>
        </ul>
</section>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
</body>
</html>